<template>
  <div>
    <el-table
        :data=userList
        border
        stripe
        :row-class-name="tableRowClassName"
        style="width: 100%">

      <el-table-column
          prop="id"
          label="ID"
          width="100"/>

      <el-table-column
          prop="code"
          label="学号"
          width="100"/>


      <el-table-column
          prop="fullName"
          label="姓名"
          width="100"/>


      <el-table-column
          prop="address"
          label="地址"
          width="100"/>

      <el-table-column
          prop="gender"
          label="gender"
          width="100"/>


      <el-table-column
          prop="grade"
          label="年级"
          width="100"/>

        <el-table-column
            prop="major"
            label="主修课程"
            width="100"/>

      <el-table-column
          prop="dateCreated"
          label="创建时间"
          width="100"/>

      <el-table-column
          prop="dateModified"
          label="修改时间"
          width="100"/>

    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryInfo.pageNum"
        :page-sizes="[5,10,15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.totalNumber">
    </el-pagination>
  </div>
</template>



<script>
export default {
  created () {
    this.getStudentList();

  },
  data() {
    return{
      queryInfo: {
        pageNum: 0,
        pageSize: 5
      },
      userList: [],
      totalNumber: 0,
    }
  },
  methods: {

    async getStudentList(){
      // eslint-disable-next-line no-unused-vars
      const {data:res} = await this.$http.post("/teach/student/findAll/"+this.queryInfo.pageNum+"/"+this.queryInfo.pageSize);
      this.userList = res.userList;
      this.totalNumber = res.number;
    },

    handleSizeChange(newSize){
      this.queryInfo.pageSize = newSize;
      this.getStudentList();
    },

    handleCurrentChange(newNum){
      this.queryInfo.pageNum=newNum;
      this.getStudentList();
    },

    // eslint-disable-next-line no-unused-vars
    tableRowClassName({row,rowIndex}){
      if(rowIndex%2 ===0){
        return 'warn-row';
      }else if(rowIndex%2 != 0){
        return 'success-row';
      }
    }

  }

}
</script>


<style >
.el-table .warning-row {
  background-color: black;
}

.el-table .success-row {
  background-color: #f0f9eb;
}

</style>
